<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { computed } from '@vue/reactivity';
import { reactive, ref } from 'vue';
import { bannerListApi, removeBannerApi, updateFlagApi, addBannerApi } from '../api/banner'

// 删除轮播图
const handleDelete = (index: number, row: any) => {
  bannerData.value = bannerData.value.filter((item: any) => item.bannerid != row.bannerid)
  removeBannerApi(row.bannerid).then(res => {
    console.log(res);
  })
  // console.log('row', row.bannerid)
}

// 获取轮播图数据
let bannerData: any = ref([]);
bannerListApi().then((res: any) => {
  bannerData.value = res.data
})

// 分页
// 1)、每页10条数据。
let pageSize = ref(10);
// 2)、当前页码：
let currentPage = ref(1);

let list = computed(() => bannerData.value.slice(pageSize.value * (currentPage.value - 1), pageSize.value * currentPage.value))

// 是否可用
function emitFlag(flag: any, bannerid: any) {
  updateFlagApi({
    bannerid, flag
  })
}

// 添加轮播图部分
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)


const ruleForm = reactive({
  imgsrc: '',
  title: '',
  dec: ''
})

function add() {
  dialogFormVisible.value = false
  addBannerApi({
    img: ruleForm.imgsrc,
    alt: ruleForm.title,
    link: ruleForm.dec
  }).then(res => {
    bannerListApi().then((res: any) => {
      bannerData.value = res.data
    })
    currentPage.value = 1
    ruleForm.imgsrc = ''
    ruleForm.title = ''
    ruleForm.dec = ''
  })
}
</script>

<template>
  <div class="content">
    <!-- 添加轮播图页面 -->
    <el-button @click="dialogFormVisible = true" type="primary">添加轮播图</el-button>
    <el-dialog v-model="dialogFormVisible" title="添加轮播图">
      <el-form :model="ruleForm">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.imgsrc" autocomplete="off" placeholder="图片地址" />
        </el-form-item>
        <el-form-item prop="username">
          <el-input v-model="ruleForm.title" autocomplete="off" placeholder="提示信息" />
        </el-form-item>
        <el-form-item prop="userpass">
          <el-input v-model="ruleForm.dec" placeholder="链接地址" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="add">添加</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 数据 -->
    <el-table :data="list" style="width:100%" size="large">
      <el-table-column label="序号" min-width="47">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="图片" min-width="212">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <img :src="scope.row.img" style="width: 200px;height:85px">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否启用" min-width="110">
        <template #default="scope">
          <el-switch v-model="scope.row.flag" @change="(newval: any) => emitFlag(newval, scope.row.bannerid)" />
        </template>
      </el-table-column>
      <el-table-column label="链接" min-width="110">
        每10分钟更新一次
      </el-table-column>
      <el-table-column label="提示" min-width="110">
        官方优质轮播
      </el-table-column>
      <el-table-column label="操作" min-width="95">
        <template #default="scope">
          <el-button type="danger" plain @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="bannerData.length" v-model:page-size="pageSize"
      v-model:current-page="currentPage" />
  </div>
</template>

<style scoped>
.content {
  position: relative;
}

.el-pagination {
  margin-top: 15px;
  float: right;
}
</style>
